<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body{
        margin: 0;
    }
    header{
        height: 700px;
        background-image: url(bg.jpg);
        background-size:cover;
        display: flex;
        align-items: center;
        justify-content:center;
    }
    button{
        position:relative;
         top: 200px;
         width: 200px;
         height: 100px;
         background-color: red;
         color: pink;
        font-size: 40px;
        border: 1px solid #fff;
        outline: none;
        border-radius:20px;
        cursor: pointer;
}
        button: hover{
        background-color:blue;
        color:yellow;

}
div{
        height: 300px;
        display: flex;
        align-items: center;
        justify-content:center;
}
span{
    font-size: 50px;
    color:red;
}
article{
    height:580px;
    background-image: url(2.jpg);
    background-attachment:fixed;
    background-size: cover;
}

main{
    height: 580px;
    position:relative;
}
main>img{
    position:absolute;
    bottom:0;
    left: 200px;
}
main>aside{
    width:500px;
    position:absolute;
    top: 100px;
    right:200px;
}
aside>h1{
    font-size: 50;
    color:orange;
}
aside>p{
    font-size: 20;
    color:purple;
}
map{
    display: block;
    width: 100%;
    height: 700px;
}
section{
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;

}
section>img{
    margin:0 50px;

}
video{
    width: 100%;
}
nav{
    width:100%;
    height:60x;
    background-color:rgba(18,183,245,0.5);
}
li{
        line-height: 80px;
        display: inline-block;
        padding: 0 30px;
        cursor: pointer;
}
li:hover{
      background-color: #12b7f5;
}
li>a{
        color:#fff;
        font-size:22px;
        text-decoration: none;

}
nav img{
    margin: 0 50px;
    position: relative;
    top: 15px;
}
footer{
    heinght:380px;
    background-color: #2a2a2a;
}
figure{
    width: 1500px;
    margin: 0 auto;
    padding-top:10px;
    text-align:center;
    color: #fff;
}







</style>
</head>
<body>
<nav>
    <a><img src="2.png" alt=""></a>
    <li><a href="https://user.qzone.qq.com/503383277/main">首页</a></li>
    <li><a href="https://user.qzone.qq.com/503383277/infocenter?_t_=0.6323765457165929">下载</a></li>
    <li><a href="https://user.qzone.qq.com/503383277/infocenter?_t_=0.6323765457165929">动态</a></li>
</nav>

<header>
<img src="5.png" alt="">
    <button>点击下载</button>
</header>
<div>
    <span>乐·在·沟·通</span>
</div>
<article></article>
<main>
    <img src="pic1.png" alt="">
    <aside>
        <h1>沟通，是跨越千山万水的亲切声音</h1>
        <p>无论何时何地，你都能享受QQ在各类终端上带来的高清通话，与好友一起想聊多久聊多久</p>
        <p>
            <a href="http://im.qq.com//">了解更多></a>
        </p>
    </aside>
</main>
<map id="here"></map>
<section>
    <img src="QQ图片20170630110626.png" alt="">
    <img src="QQ图片20170630110641.png" alt="">
    <img src="QQ图片20170630110657.png" alt="">
    <audio src="汪苏泷 - 一笑倾城.mp3" controls="1.mp4" ></audio>
</section>
    <video src="1.mp4" controls></video>
<footer>
  <hr>
      <figure>
          <h6>Copyright © 2017 Tencent. All Rights Reserved</h6>
          <h6> 腾讯科技 版权所有</h6>
      </figure>

</footer>
</body>



<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407);
    map.centerAndZoom(point,90);
    window.map = map;
}
initMap();
</script>

</html>